<!DOCTYPE html>
<html>

<head>
    <title>Table Role Playing System</title>
    <meta charset="utf-8" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<style>
    body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #eee;
    }

    .mod-head {
        padding-top: 150px;
        background: url(logo/bootstrap-logo.png) no-repeat;
        background-position: center top;
        background-size: 120px 120px;
    }
</style>

<body>

    <div class="container">
        <form>
            <div class="form-row justify-content-md-center">
                <div class="form-group col-md-6">
                    <label>名称</label>
                    <input type="text" class="form-control" id="name" placeholder="角色名，注意请符合规则或者符合世界背景">
                </div>
            </div>
            <div class="form-row justify-content-md-center">
                <div class="form-group col-md-6">
                    <label>密码</label>
                    <input type="password" class="form-control" id="password">
                </div>
            </div>

            <div class="form-row justify-content-md-center">
                <div class="form-group col-md-4">
                    <input type="checkbox" id="isDM">
                    <label>我是个 DM</label>
                </div>
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" id="roomName" placeholder="输入房间名" disabled>
                </div>
            </div>
            <div id="userData">
                <div class="form-row justify-content-md-center">
                    <div class="form-group col-md-2">
                        <label>年龄</label>
                        <input type="number" class="form-control" id="age" placeholder="输入年龄">
                    </div>
                    <div class="form-group col-md-2">
                        <label>性别</label>
                        <input type="text" class="form-control" id="gender" placeholder="输入性别">
                    </div>
                    <div class="form-group col-md-2">
                        <label>种族</label>
                        <select class="form-control" id="ethnicity">
                            <option>人类</option>
                            <option>矮人</option>
                            <option>精灵</option>
                            <option>侏儒</option>
                            <option>半精灵</option>
                            <option>半兽人</option>
                            <option>半身人</option>
                        </select>
                    </div>

                </div>
                <div class="form-row justify-content-md-center">
                    <div class="form-group col-md-3">
                        <label>职业</label>
                        <select class="form-control" id="occupation">
                            <option>野蛮人</option>
                            <option>吟游诗人</option>
                            <option>德鲁伊</option>
                            <option>牧师</option>
                            <option>战士</option>
                            <option>武僧</option>
                            <option>圣武士</option>
                            <option>巡林客</option>
                            <option>游荡者</option>
                            <option>术士</option>
                            <option>法师</option>
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <label>阵营</label>
                        <select class="form-control" id="religion">
                            <option>守序善良</option>
                            <option>中立善良</option>
                            <option>混乱善良</option>
                            <option>守序中立</option>
                            <option>绝对中立</option>
                            <option>混乱中立</option>
                            <option>守序邪恶</option>
                            <option>中立邪恶</option>
                            <option>混乱邪恶</option>
                        </select>
                    </div>
                </div>
                <div class="form-row justify-content-md-center">
                    <div class="form-group col-md-3">
                        <label>语言</label>
                        <input type="text" class="form-control" id="language" placeholder="多种语言注意分隔">
                    </div>
                    <div class="form-group col-md-3">
                        <label>体形</label>
                        <select class="form-control" id="body">
                            <option>超巨型</option>
                            <option>巨型</option>
                            <option>超大型</option>
                            <option>大型</option>
                            <option>中型</option>
                            <option>小型</option>
                            <option>超小型</option>
                            <option>微型</option>
                            <option>超微型</option>
                        </select>
                    </div>
                </div>
                <div class="form-row justify-content-md-center">
                    <div class="form-group col-md-6">
                        <label>角色外貌描述</label>
                        <input type="text" class="form-control" id="background" placeholder="角色外貌，包含体重身高肤色等">
                    </div>
                </div>
                <div class="form-row justify-content-md-center">
                    <div class="form-group col-md-3">
                        <label>角色六种属性值生成：</label>
                        <label id="rollans"></label>
                    </div>
                    <div class="form-group col-md-3">
                        <button type="button" class="btn btn-outline-primary btn-sm" id="Reroll">Reroll</button>
                    </div>
                </div>
                <div class="form-row justify-content-md-center">
                    <div class="form-group col-md-2">
                        <label>力量</label>
                        <!-- <select class="form-control" id="STR">
                        <option>12</option>
                        <option>13</option>
                    </select> -->
                        <input type="number" class="form-control" id="STR">
                    </div>
                    <div class="form-group col-md-2">
                        <label>敏捷</label>
                        <input type="number" class="form-control" id="DEX">
                    </div>
                    <div class="form-group col-md-2">
                        <label>体质</label>
                        <input type="number" class="form-control" id="CON">
                    </div>
                </div>
                <div class="form-row justify-content-md-center">
                    <div class="form-group col-md-2">
                        <label>智力</label>
                        <input type="number" class="form-control" id="INT">
                    </div>
                    <div class="form-group col-md-2">
                        <label>感知</label>
                        <input type="number" class="form-control" id="WIS">
                    </div>
                    <div class="form-group col-md-2">
                        <label>魅力</label>
                        <input type="number" class="form-control" id="CHA">
                    </div>
                </div>

                <div class="form-row justify-content-md-center">
                    <div class="form-group col-md-6">
                        <label>生命值</label>
                        <input type="number" class="form-control" id="HP">
                    </div>
                </div>

                <div class="form-row justify-content-md-center">
                    <div class="form-group col-md-6">
                        <label>种族特性/专长</label>
                        <input type="text" class="form-control" id="speciality" placeholder="角色专长，多个注意分隔">
                    </div>
                </div>
                <div class="form-row justify-content-md-center">
                    <div class="form-group col-md-6">
                        <label>技能列表</label>
                        <input type="text" class="form-control" id="skill" placeholder="角色技能，多个注意分隔">
                    </div>
                </div>
                <div class="form-row justify-content-md-center">
                    <div class="form-group col-md-6">
                        <label>背包物品</label>
                        <input type="text" class="form-control" id="bag" placeholder="角色背包，多个注意分隔">
                    </div>
                </div>
            </div>
            <div class="form-row justify-content-md-center">
                <div class="form-group col-md-6">
                    <button type="button" class="btn btn-primary btn-lg btn-block" id="create">创建</button>
                </div>
            </div>
        </form>
    </div>
    <script src="character.js" charset="utf-8"></script>
</body>

</html>